<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  price: {
    type: [Number, String],
    required: true
  },
  currency: {
    type: String,
    default: '¥'
  },
  unit: {
    type: String,
    default: '元'
  },
  decimals: {
    type: Number,
    default: 2
  },
  color: {
    type: String,
    default: ''
  }
})

const formattedPrice = computed(() => {
  // 将价格从分转换为元
  const priceValue = Number(props.price) / 100
  // 格式化为指定小数位数
  return priceValue.toFixed(props.decimals)
})

const displayPrice = computed(() => {
  return `${props.currency} ${formattedPrice.value} ${props.unit}`
})
</script>

<template>
  <span class="price-format" :style="{ color: color }">{{ displayPrice }}</span>
</template>

<style scoped>
.price-format {
  font-weight: bold;
}
</style> 